    <template>
    <div class="myTable">
        <!-- 树形表格 -->
        <template v-if='$props.treeTableOptions'>
            <el-table
                :data="$props.tableData"
                stripe
                border
                :row-key="$props.treeTableOptions.row_key"
                :default-expand-all="$props.treeTableOptions.default_expand_all"
                :tree-props="$props.treeTableOptions.tree_props_options"
                >
            >
          <!-- 索引值 -->
          <el-table-column
            type="index"
            :index="1"
            label="#"
            >
          </el-table-column>
          <template>
            <el-table-column
                v-for="(v,i) in $props.tableOptions"
                :key="i"
                :label="v.label"
                :min-width="v.width"
                :type="v.type?v.type:''"
                >
                 <template slot-scope="scope">
                    {{ scope.row[handlyFilters(v.prop)] | myFilter(scope.row[v.prop])}}
                    <slot :name="v.slot" :slotData="scope.row"></slot>
                </template>
            </el-table-column>
          </template>
            </el-table>
        </template>
         <!-- 普通表格 -->
        <template v-else>
            <el-table
          :data="$props.tableData"
          stripe
          border>
          >
          <!-- 索引值 -->
          <el-table-column
            type="index"
            :index="1"
            label="#"
            >
          </el-table-column>
        <template>
            <el-table-column
                v-for="(v,i) in $props.tableOptions"
                :key="i"
                :label="v.label"
                :min-width="v.width"
                :type="v.type?v.type:''"
                >
                <template slot-scope="scope">
                    {{ scope.row[handlyFilters(v.prop)] | myFilter(scope.row[v.prop])}}
                    <slot :name="v.slot" :slotData="scope.row"></slot>
                </template>
            </el-table-column>
            </template>
            </el-table>
        </template>
    </div>
</template>
<script>
export default {
    name:'myTableOne',
    props:{
        tableOptions:{
            type:Array
        },
        tableData:{
            type:Array
        },
        treeTableOptions:{
            type:Object
        }

    },
    data() {
        return { 
            
        }
    },
    mounted(){
        //console.log(this.$props.treeTableOptions.row_key);
    },
    methods:{
        //过滤prop的key
        handlyFilters(prop){
            const arr=['add_time','level','cat_level','create_time','pay_status']
            if (arr.includes(prop)) {
                return ''
            }
            return prop
        }
    },
    //过滤器
    filters:{
        //过滤prop的value
       myFilter(item){
            //const reg=/^[0-3]$/g;
            if( (typeof item !== 'boolean') && !(item instanceof Array)) return item
                else return ''   
            }    //'1','2','3',true,false
      
    },
}
</script>
<style lang="scss">
    .myTable{
       
        .el-table thead {
            font-size: 12px;
            font-weight: normal;
        }
       
        .el-table__body-wrapper{
          font-size: 10px;
        }
       
    }
</style>